<template>
  <div v-if="$route.name" id="app" :class="{ special: $route.name == 'live' }">
    <!-- 不能删除，为了解决字体闪动问题 -->
    <b class="font_box_joe">
      <b></b>
    </b>
    <template v-if="is_show">
      <my_header
        v-if="
          $route.name != 'live' &&
            $route.name != 'index' &&
            $route.name != 'egImg' &&
            $route.name != 'inAnalysis' &&
            $route.name != 'searchGoodsAly01' &&
            $route.name != 'matchHistory' && 
            $route.name != 'corporate'
        "
      />
      <router-view></router-view>
      <!-- <index_footer /> -->
      <!-- 去掉footer后 底部充当margin -->
      <!-- <div
        v-if="$route.name != 'live' && $route.name != 'index'"
        class="footerDiv"
      ></div>-->
      <div
        v-if="$route.name != 'live' && $route.name != 'index' && $route.name != 'corporate'"
        class="footerDiv"
      ></div>
      <!-- <div v-if="$route.name != 'live' && $route.name != 'index'"
      class="footerDiv"></div>-->
      <!-- <div v-if="$route.name != 'live'&&$route.name != 'index'"
      class="footerDiv"></div>-->
      <her_footer v-if="$route.name == 'index'" />
      <!-- 注册成功领取会员弹窗 -->
      <!-- <SvipPopup v-if="showSVipPopup" v-model="showSVipPopup"/> -->
      <div class="login">
        <el-dialog
          :lock-scroll="false"
          :visible.sync="showSVipPopup"
          width="500px"
          top="20vh"
          class="dialog02"
          :show-close="false"
          @close="$store.commit('getSvipPopup', false)"
        >
          <div class="svip_popup">
            <div
              class="close_img_box"
              @click="
                $store.commit('getSvipPopup', false);
                showSVipPopup = false;
              "
            >
              <!-- <img src="@/assets/wang/video/close.png" alt=""> -->
            </div>
            <div class="sp_title">
              <div class="sp_text">新用户免费领取会员</div>
              <!-- <div class="sp_xsimg_box">
                <img src="@/assets/shi/xs.png" alt />
                <div class="sp_xs">限时</div>
              </div> -->
            </div>

            <div class="sp_line">
              <img src="@/assets/shi/line.png" alt />
            </div>

            <div class="sp_code">
              <img src="./assets/shi/qr_img01.jpg" alt />
            </div>

            <div class="sp_svip_box">
              <!-- <div class="img_box">
                <img src="@/assets/shi/svip.png" alt />
              </div> -->
              <div class="svip_text"></div>
              <div class="svip_text">
                <p>「微信扫码添加官方导师」</p>
                免费领取7天SVIP-个人版会员
              </div>
            </div>

            <div class="sp_dotted_line"></div>

            <div class="sp_btm_box">
              <div class="sp_btm_item">
                <div class="btm_img_box">
                  <img src="@/assets/shi/gdsj01.png" alt />
                </div>
                <div class="btm_text">更多数据</div>
              </div>
              <div class="sp_btm_item">
                <div class="btm_img_box">
                  <img src="@/assets/shi/glzy01.png" alt />
                </div>
                <div class="btm_text">更多资源管理</div>
              </div>
              <div class="sp_btm_item">
                <div class="btm_img_box">
                  <img src="@/assets/shi/gj01.png" alt />
                </div>
                <div class="btm_text">更多小工具</div>
              </div>
              <div class="sp_btm_item">
                <div class="btm_img_box">
                  <img src="@/assets/shi/zs01.png" alt />
                </div>
                <div class="btm_text">带货助手</div>
              </div>
            </div>
          </div>
        </el-dialog>
      </div>
      <!-- 首页活动弹窗 -->
      <!-- <div class="login">
        <el-dialog
          :visible.sync="showActivityPopup"
          width="935px"
          top="0"
          class="vipActivity"
          :show-close="false"
          :lock-scroll="false"
          @close="$store.commit('huoDongPopup', false)"
        >
          <div class="activity_popup">
            <div
              class="ap_clone"
              @click="
                $store.commit('huoDongPopup', false);
                showActivityPopup = false;
              "
            >
              <img src="@/assets/img/close_huodong.png" alt />
            </div>
            <div class="ap_look_details" @click="lookDetails">
            </div>
          </div>
        </el-dialog>
      </div> -->
      <!-- 限时礼包大放送 -->
      <div class="time_activity_pop">
        <el-dialog
          :lock-scroll="false"
          :visible.sync="showActivityPopup"
          width="567px"
          top="20vh"
          :show-close="false"
        >
          <div class="time_activity_wrap">
            <img @click="$store.commit('huoDongPopup', false); showActivityPopup = false;" class="close_img" src="@/assets/shi/banner-close.png" alt="">
            <div class="btn" @click="toMember">
              <img src="@/assets/shi/pc-banner-btn02.png" alt="">
            </div>
          </div>
        </el-dialog>
      </div>
    </template>
    <div class="app_loading" v-else>
      <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <!-- 对公转账 -->
    <!-- 对公转账 弹窗 -->
    <el-dialog :visible.sync="$store.state.dialog01" width="890px" top="16vh" class="dialog01">
      <div class="content">
        <p class="d1">企业对公转账说明</p>
        <p class="d2">对公转账流程</p>
        <section class="d3">
          <div>
            <img src="@/assets/meng/b7.png" />
            <p>对公打款，成功转账</p>
          </div>
          <img src="@/assets/meng/b11.png" />
          <div>
            <img src="@/assets/meng/b8.png" />
            <p>联系客服，提供凭证</p>
          </div>
          <img src="@/assets/meng/b11.png" />
          <div>
            <img src="@/assets/meng/b9.png" />
            <p>客服审核，确认到账</p>
          </div>
          <img src="@/assets/meng/b11.png" />
          <div>
            <img src="@/assets/meng/b10.png" />
            <p>开通权限，升级成功</p>
          </div>
        </section>
        <p class="d2 mb_30">对公账户信息</p>
        <p class="d4">
          <span>收款账户：</span>掌上互动（北京）科技有限公司
        </p>
        <p class="d4">
          <span>账户号码：</span>697330014
        </p>
        <p class="d4">
          <span>开户银行：</span>中国民生银行股份有限公司北京京广支行
        </p>
        <p class="d4">
          <span>地址：</span>北京市朝阳区高碑店乡半壁店村惠河南街1129号2号楼2层2003室
        </p>
        <p class="d4">
          <span>电话：</span> 010-57201618
        </p>
        <button class="d5" @click="$store.commit('dialog01', false)">好的</button>
      </div>
    </el-dialog>
    <!-- 360兼容模式 判断 -->
    <div class="modes">
      <el-dialog
        :visible.sync="showmodes"
        width="970px"
        top="22vh"
        class="dialog02"
        :show-close="false"
      >
        <div class="modebox">
          <div>
            <h3>温馨提示</h3>
            <p style="text-indent:2em">如果您正在使用360浏览器，为了您使用网</p>
            <p>&nbsp;&nbsp;站时有更优质的体验，请您将浏览模式切换为极</p>
            <p>&nbsp;&nbsp;速模式或使用谷歌浏览器(Google Chrome）。</p>
            <p style="text-align: center;">&nbsp;&nbsp;如果您使用的是其他浏览器，请忽略。</p>
            <div @click="knowclose()" class="knowclose">我知道了</div>
          </div>
          <img src="@/assets/shi/img360.gif" class="imgmode" />
        </div>
      </el-dialog>
    </div>
    <div class="help_dialog" :class="{'show_dialog' : isShowHelp}">
      <el-dialog :visible.sync="showMask" width="440px" top="16vh" class="dialog01" :show-close="false" :close-on-click-modal="false">
        <div class="help_friend_pop">
          <div class="help_btn" @click="restart">
            <img src="@/assets/shi/help_btn.png" alt="">
          </div>
          <img @click="helpClose" class="help_close_img" src="@/assets/shi/help_close.png" alt="">
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import my_header from './component/my_header';
import my_footer from './component/my_footer';
import her_footer from './component/footer';

export default {
  name: 'App',
  components: { my_header, my_footer, her_footer },
  data() {
    return {
      is_show: false, //是否渲染页面 数据都返回后再渲染页面
      showSVipPopup: this.$store.state.isVipPopup,
      // showSVipPopup: true,
      showActivityPopup: this.$store.state.isHuoDongPopup,
      // showActivityPopup: true,
      showmodes: false,
      showMask: false,
      isShowHelp: false
    };
  },
  watch: {
    '$store.state.isVipPopup'(newVal) {
      this.showSVipPopup = newVal;
    },
    '$store.state.isHuoDongPopup'(newVal) {
      this.showActivityPopup = newVal;
      if(!newVal){
        this.isShowHelp = true
      }
    },
    //  "$store.state.dialog01"(newVal) {
    //   this.dialog01 = newVal;
    // }
    is_show(n){
      if(n){  //隐藏全局的loading浮层
        let el = document.getElementById('pageLoadingEl');
        el.style.display = 'none';
      }
    }
  },
  created() {
    // 判断有drawVipPop 说明是用户点击分享连接进来的
    // if(localStorage.getItem('drawVipPop')=='true'){
    //   this.showMask = true;
    //   this.showSVipPopup = false;
    //   this.showActivityPopup = false;
    // }
    if (location.pathname == '/corporate') {
      //以下页面不走接口逻辑
      this.is_show = true;
      return;
    }
    let uid = localStorage.getItem('user_id');
    if(!uid){
      this.$store.commit('huoDongPopup', true);
    }
    this.speedmode();
    this.get_person().then(() => {
      this.is_show = true;
      if (!uid) {
        let url = window.location.href;
        let iUrl = location.host + '/?invitecode';
        if (url.indexOf(iUrl) > -1) {
          localStorage.setItem('register', true);
          if (!localStorage.getItem('register')) {
            window.open(window.location.href);
          }
          this.$store.commit('registerChange', true);
        } else {
          // this.$router.push('/');
          this.$store.commit('registerChange', false);
        }
      }
      if (~navigator.userAgent.indexOf('Mobile')) {
        let url = window.location.href;
        let iUrl = location.host + '/?invitecode';
        let inStr = '';
        if (url.indexOf(iUrl) > -1) {
          inStr = '?invitecode=' + this.urlPms.invitecode;
        }
        let goUrl = '';
        if (location.href.indexOf('test-') > -1) {
          goUrl = 'https://test-m-dy.zsjx114.com' + inStr;
        } else {
          goUrl = 'https://m-dy.zsjx114.com' + inStr;
        }
        window.location.href = goUrl;
        return false;
      }
    });
    // this.showSVipPopup = localStorage.getItem("loginType" == 2) ? true : false;
  },
  mounted() {
    if(localStorage.getItem('user_id')){
      // this.getVipDraw();
      this.getCustomerService().then(res=>{
        // 判断有drawVipPop 说明是用户点击分享连接进来的,
        if(localStorage.getItem('drawVipPop')=='true'){
          this.showMask = true;
          this.showSVipPopup = false;
        }
      });
    }
  },
  methods: {
    toMember(){
      let uid = localStorage.getItem('user_id');
      let loginedUrl = '/talent_main/buy';
      this.$store.commit('huoDongPopup', false);  //隐藏活动弹框
      if(!uid){
        this.$store.commit('isPopLoginBox', true);  //展示登录弹窗
        this.$store.commit('loginedUrl', loginedUrl);  //展示登录弹窗
      }else{
        this.$router.push("/talent_main/buy?showTip="+true) //跳转购买会员页面
      }
      
    },
    helpClose(){
      this.showMask = false;
      localStorage.removeItem('drawVipPop')
      this.showSVipPopup = true;
    },
    restart(){
      // this.helpClose();
      this.showMask = false;
      localStorage.removeItem('drawVipPop')
      this.$router.push("/talent_main/sendMembers");
      // this.$message({
      //   message: '任务激活成功',
      //   type: 'success',
      //   offset: 100
      // });
      
    },
    getCustomerService() {  //是否为新注册用户并赠送3天svip
      return new Promise((resolve, reject)=>{
        this.$axios.get('/api/customer/GetCustomerService').then(res => {
          // code = 1 不弹  0 弹；
          this.showSVipPopup = !Boolean(res.data.code);
          let isPop = localStorage.getItem('huoDongPopup');
          if (!isPop) {
            //退出登录都要清除，老用户每次登录进来都要弹出活动弹框
            this.$store.commit('huoDongPopup', true);
            localStorage.setItem('huoDongPopup', 1);
          }
          resolve()
        });
      }) 
    },
    // getVipDraw() {  //是否为新注册用户并赠送3天svip
    //   this.$axios.get('/api/customer/getVipDraw').then(res => {
    //     let isPopNotifyBox = localStorage.getItem('isPopNotifyBox');
    //     if(res.data.code == '0'){  // 首次注册进来弹出
    //       if(!isPopNotifyBox){
    //         this.$notify({
    //           title: '福利送达',
    //           dangerouslyUseHTMLString:true,
    //           customClass:'notify_give',
    //           message: '<span>登录成功啦！恭喜您获得3天体验版会员，祝您使用愉快！</span><i class="notify_icon_smile"></i>',
    //           type: 'success',
    //           duration:6000
    //         });
    //         localStorage.setItem('huoDongPopup', 1);  //首次登录之后，不需要再谈活动弹框
    //         localStorage.setItem('isPopNotifyBox', 1);  //首次登录之后，不需要再谈活动弹框
    //       }
    //     }else if(res.data.code == '1'){ //新逻辑，只要注册了并赠送了svip就算老用户
    //       if(location.href.indexOf('/talent_main/buy') == -1){ //除了购买续费页面，其他页面只要登录了都要弹出
    //         let isPop = localStorage.getItem('huoDongPopup');
    //         if (!isPop) {
    //           //退出登录都要清除，老用户每次登录进来都要弹出活动弹框
    //           this.$store.commit('huoDongPopup', true);
    //           localStorage.setItem('huoDongPopup', 1);
    //         }
    //       }
    //     }
    //   });
    // },
    lookDetails() {
      // this.$router.push('/talent_main/buy')
      // let router = this.$router.resolve({
      //   path: `/talent_main/buy`
      // });
      // // window.open(router.href, '_blank');
      let uid = localStorage.getItem('user_id');
      let loginedUrl = '/talent_main/buy';
      this.$store.commit('huoDongPopup', false);  //隐藏活动弹框
      if(!uid){
        this.$store.commit('isPopLoginBox', true);  //展示登录弹窗
        this.$store.commit('loginedUrl', loginedUrl);  //展示登录弹窗
      }else{
        this.$router.push(loginedUrl);
      }
    },
    get_person() {
      return new Promise((resolve, reject) => {
        let that = this;
        this.$axios({
          method: 'get',
          url: '/api/customer/getperson'
        })
          .then(response => {
            // console.log(this.$store);
            if (response.data && response.data.code == 1006) {
              //未登录也要加载
              resolve(response);
              this.$clearLocal();
            }
            if (response.data.code == 0) {
              let vipLevel = response.data.data.vipLevel;
              this.$store.commit('userInfo', response.data.data);
              this.$store.commit('change_is_vip', response.data.data.vipLevel);
              localStorage.setItem('vipLevel', response.data.data.vipLevel);
              localStorage.setItem('photo', response.data.data.headImgUrl);
              localStorage.setItem('vipEndTime1', response.data.data.vipEndTime1);
              localStorage.setItem('autoVipType', response.data.data.autoVipType);
              localStorage.setItem('vipDuration', response.data.data.duration);
              this.$axios({
                method: 'get',
                url: '/api/module/getmodule'
              })
                .then(res => {
                  if (res.data.code == 0) {
                    let roots = res.data.data;
                    let rootObj = [];
                    //添加权限对象
                    if (vipLevel == 1) {
                      rootObj = roots['listsvip'];
                    } else if (vipLevel == 2) {
                      rootObj = roots['listplusvip'];
                    } else if (vipLevel == 3) {
                      rootObj = roots['listHalloween'];
                    } else if (vipLevel == 4) {
                      rootObj = roots['listvip'];
                    } else if (vipLevel == 5) {
                      rootObj = roots['listsvipPersonal'];
                    } else {
                      rootObj = roots['listfree'];
                    }
                    let initRootObj = {};

                    for (let i = 0; i < rootObj.length; i++) {
                      let parentLevel = rootObj[i];
                      initRootObj[parentLevel.id] = {
                        owner: parentLevel.owner,
                        ownerMinLevel: parentLevel.ownerMinLevel
                      };
                      for (let j = 0; j < rootObj[i].subList.length; j++) {
                        let childLevel = rootObj[i].subList[j];
                        let idKey = childLevel.id;
                        // initRootObj[parentLevel.id][idKey] = childLevel.owner;
                        initRootObj[parentLevel.id][idKey] = {
                          ownerMinLevel: childLevel.ownerMinLevel,
                          owner: childLevel.owner
                        };
                      }
                    }

                    this.$store.commit('userRoot', initRootObj);
                    this.$store.commit('userRootData', roots);
                    resolve();
                  }
                })
                .catch(error => {
                  reject(error);
                  console.log(error);
                });
            }
          })
          .catch(error => {
            reject(error);
            console.log(error);
          });
      });
    },
    // // 同时发送多个请求
    // getAllData() {
    //   let that = this;
    //   that.$axios
    //     .all([
    //       // that.get_data01(),
    //     ])
    //     .then(
    //       that.$axios.spread((area, acct, perms) => {
    //         // console.log("所有请求完成");
    //         // console.log(area,acct,perms);
    //         // 想要打印返回结果的话就在请求的时候不要写then 在此处就可以打印返回值
    //         that.is_show = true;
    //       })
    //     )
    //     .catch(err => {
    //       console.log(err);
    //       // this.$store.commit("kindError", true);
    //     });
    // },
    //   省份城市
    get_data01() {
      return this.$axios({
        method: 'get',
        url: '/api/area/search'
      })
        .then(response => {
          if (response.data.code == 0) {
            response.data.data.map((item, index) => {
              item.city.unshift('不限');
              item.cid.unshift(0);
            });
            let province_city = response.data.data;
            this.$store.commit('change_province_city', province_city);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 关闭360弹窗按钮
    knowclose() {
      this.showmodes = false;
    },
    // 360兼容模式
    speedmode() {
      if (!!window.ActiveXObject || 'ActiveXObject' in window) {
        this.showmodes = true;
      }
      // if (window.navigator.userAgent.indexOf('compatible') != -1) {
      //   this.showmodes = false;
      //   console.log('兼容模式');
      // }
      // if (window.navigator.userAgent.indexOf('AppleWebKit') != -1) {
      //   console.log('360极速模式');
      // } else {
      //   this.showmodes = false;
      //   console.log('兼容模式');
      // }
    }
  }
};
</script>

<style lang="less">
@import './common/wang_app.less';
@import './common/meng_app.less';
@import './common/li_app.less';
@import './common/liu.less';
@import './common/shi.less';
// 360兼容模式弹框
.modebox {
  width: 972px;
  padding: 50px 54px 50px 94px;
  box-sizing: border-box;
  background-color: #fff;
  background-image: url('~@/assets/shi/bg360.png');
  background-size: 100% 100%;
  background-position: 0 -44px;
  border-radius: 5px;
  display: flex;
  div {
    width: 430px;
    margin-right: 94px;
    h3 {
      padding-bottom: 16px;
      font-size: 24px;
      color: #222;
      text-align: center;
      font-weight: normal;
    }
    p {
      line-height: 47px;
      font-size: 18px;
      color: #222;
      border-bottom: 1px dashed #b5b5b5;
    }
    .knowclose {
      margin: 20px auto 0 auto;
      width: 140px;
      height: 50px;
      line-height: 50px;
      border-radius: 4px;
      background-color: #fd7f2c;
      cursor: pointer;
      font-size: 16px;
      color: #fff;
      text-align: center;
    }
  }
  .imgmode {
    display: block;
    width: 340px;
    height: 314px;
  }
}
// 下拉菜单的颜色
.el-select-dropdown__item.selected {
  color: #fd7f2c !important;
}

.el-date-table td.today span {
  color: #ff924b !important;
}
//   下拉菜单时间列表
.el-date-table td.end-date span,
.el-date-table td.start-date span {
  background-color: #fd7f2c !important;
  color: #fff !important;
}
.el-date-table td.available:hover {
  color: #ff924b;
}

div,
p,
span,
button,
input,
textarea,
th,
li,
td {
  // letter-spacing: 1px;
}
.special {
  min-width: auto !important;
}
#app {
  min-height: 100%;
  font-family: DINPro, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
    Segoe UI Symbol;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-width: 1310px;
}
.footerDiv {
  width: 100%;
  height: 20px;
  background-color: #f1f1f1;
}
// 改变input placeholder 的颜色
::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #888888 !important;
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #888888 !important;
}
::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #888888 !important;
}
:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #888888 !important;
}
// 饿了么导航切换
.el-tabs {
  width: 100%;
  .el-tabs__header {
    margin: 0;
    outline: none;
    padding-left: 20px;
  }
  .el-tabs__item {
    line-height: 42px;
    height: 42px;
    font-size: 16px;
    font-weight: 600;
    padding: 0 36px;
    outline: none;
  }
  .el-tabs__item:hover {
    color: #ff924b;
  }
  .el-tabs__item.is-active {
    color: #fd7f2c;
  }
  .el-tabs__active-bar {
    background-color: #fd7f2c;
  }
  .el-tabs__nav-wrap:after {
    background-color: transparent;
  }
}
// 加载图标
.loading {
  width: 100%;
  height: 80px;
  .el-icon-loading {
    color: #fd7f2c;
    font-size: 30px;
  }
  .el-loading-text {
    font-size: 15px;
  }
  .el-loading-spinner {
    margin-top: -35px;
  }
}
// 饿了么table
.el-table {
  td {
    border-bottom: 1px solid #e5e5e5;
    padding: 0;
  }
  thead {
    color: #555;
    font-size: 14px;
  }
  th.is-leaf {
    text-align: center;
    font-weight: 500;
    height: 48px;
    background-color: #f5f9ff;
    border-radius: 4px;
    border: none;
  }
}
// 公共的table
.table {
  width: 100%;
  thead tr {
    height: 48px;
    background-color: #f5f9ff;
    border-radius: 4px;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #555555;
    th {
      white-space: nowrap;
    }
  }
  tbody {
    tr {
      border-bottom: 1px solid #efefef;
    }
    tr:hover {
      background-color: #fffaf7;
    }
  }
}
// 隐藏滚动条
.hidden_scorll::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.hidden_scorll {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}
input,
textarea {
  font-family: DINPro, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
    Segoe UI Symbol;
}
button {
  font-family: DINPro, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
    Segoe UI Symbol;
  cursor: pointer;
  outline: none;
  background: #fff;
  border: none;
}
.dot {
  overflow: hidden; /*超出宽度部分的隐藏*/
  white-space: nowrap; /*文字不换行*/
  text-overflow: ellipsis; /*超出则...代替*/
  -o-text-overflow: ellipsis; /*opera*/
  width: 100%;
}
.hov:hover {
  color: #ff924b;
}
.pointer {
  cursor: pointer;
}
// element下拉框
.el-select {
  .el-select-dropdown__wrap {
    max-height: 500px;
  }
  .el-input__inner {
    width: 140px;
    height: 32px;
    // background-color: #f5f5f5;
    border-radius: 4px;
    border: solid 1px #e5e5e5;
    line-height: 32px;
    color: #222;
    outline: none;
  }
  .el-input.is-focus .el-input__inner {
    border-color: #e5e5e5;
  }
  .el-input__inner:focus {
    border-color: #e5e5e5;
  }
  .el-input__icon {
    font-weight: 600;
    line-height: 32px;
    color: #222 !important;
  }
}
//文字提示
.el-tooltip {
  outline: none;
}
.el-tooltip__popper.is-light {
  max-width: 450px;
  background-color: #555;
  color: #ffffff;
  font-size: 12px;
  line-height: 18px;
  border: none;

  outline: none;
  z-index: 9999999 !important;
  font-family: DINPro, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
    Segoe UI Symbol;
}
// 控制三角形颜色
.el-tooltip__popper.is-light[x-placement^='top'] .popper__arrow:after {
  border-top-color: #555 !important;
}
.el-tooltip__popper.is-light[x-placement^='top'] .popper__arrow {
  border-top-color: #555 !important;
}
.el-tooltip__popper.is-light[x-placement^='bottom'] .popper__arrow:after {
  border-bottom-color: #555 !important;
}
.el-tooltip__popper.is-light[x-placement^='bottom'] .popper__arrow {
  border-bottom-color: #555 !important;
}
.el-tooltip__popper.is-light[x-placement^='left'] .popper__arrow:after {
  border-left-color: #555 !important;
}
.el-tooltip__popper.is-light[x-placement^='left'] .popper__arrow {
  border-left-color: #555 !important;
}
.el-tooltip__popper.is-light[x-placement^='right'] .popper__arrow:after {
  border-right-color: #555 !important;
}
.el-tooltip__popper.is-light[x-placement^='right'] .popper__arrow {
  border-right-color: #555 !important;
}
// 饿了么loading
.el-loading-mask {
  .el-loading-text {
    color: #fd7f2c;
    font-size: 16px;
  }
  .el-loading-spinner i {
    font-size: 35px;
    margin-bottom: 10px;
    color: #fd7f2c;
  }
  -webkit-transition: opacity 0s;
  transition: opacity 0s;
  z-index: 9 !important;
}
// 时间组件
.el-input__inner:focus {
  border-color: #e5e5e5;
  + .el-input__prefix {
    transform: rotate(-180deg);
    -ms-transform: rotate(-180deg); /* IE 9 */
    -moz-transform: rotate(-180deg); /* Firefox */
    -webkit-transform: rotate(-180deg); /* Safari 和 Chrome */
    -o-transform: rotate(-180deg); /* Opera */
  }
}
// dialog
.el-dialog__wrapper {
  z-index: 999999 !important;
}
.v-modal {
  z-index: 99999 !important;
}
.el-dialog__header {
  padding: 0;
}
.el-dialog__body {
  padding: 0;
  border-radius: 4px;
}
.el-dialog__headerbtn .el-dialog__close {
  display: none;
}
// close 关闭按钮
.el-dialog__headerbtn {
  background-image: url('./assets/wang/video/close.png');
  background-size: 100% 100%;
  width: 16px;
  cursor: pointer;
  height: 16px;
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 19;
}
.el-popover {
  z-index: 999999999 !important;
  min-width: 100px;
  padding: 12px 15px;
  // padding: 0;
  &.big_img {
    padding: 0;
    border-radius: 6px;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0px 0px 12px 0px rgba(142, 142, 142, 0.3);
    img {
      width: 100%;
      height: 100%;
    }
  }
}
// 时间区间样式
.long_time {
  width: 252px !important;
  height: 32px;
  line-height: 100%;
  background-color: #f5f5f5;
  border-radius: 4px;
  border: solid 1px #e5e5e5;
  .el-range__icon {
    font-weight: 600;
    color: #222;
  }
  .el-range__close-icon {
    display: none;
  }
  .el-range__icon {
    height: 32px;
    line-height: 32px;
    position: absolute;
    right: 5px;
  }

  .el-range-separator {
    height: 32px;
    line-height: 32px;
  }

  .el-dialog__body {
    padding: 30px;
  }
  .el-range-input {
    width: 42%;
    background-color: #fff !important;
    color: #222222 !important;
    font-size: 14px !important;
  }
}
.vipActivity {
  display: flex;
  align-items: center;
  justify-items: center;
  .el-dialog {
    margin: 0 auto;
    overflow: hidden;
    background: transparent;
  }
}
.long_time.is-active,
.long_time.is-active:hover {
  border-color: #e5e5e5;
}
.long_time:hover {
  border-color: #e5e5e5;
}

.short_time {
  width: 124px !important;
  border-radius: 4px;
  .el-input__inner {
    outline: none !important;
    height: 32px;
    // border: solid 1px #e5e5e5;
    font-size: 14px;
    line-height: 34px;
    background-color: #f5f5f5;
    padding: 0 10px;
    color: #222222;
  }
  .el-input__prefix {
    left: 95px;
    width: fit-content;
  }
  .el-input__icon {
    line-height: 32px;
    font-weight: 600;
  }
}

[class*=' el-'] {
  font-family: DINPro, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
    Segoe UI Symbol;
}
// 饿了么分页
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #fd7f2c;
}
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  // width: 31px;
  height: 31px;
  border-radius: 5px;
  color: #888;
  // font-family: DINAlternate-Bold;
  font-size: 12px;
  // line-height: 34px;
}
/* input[type='number']去掉箭头 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type='number'] {
  -moz-appearance: textfield;
}
/* input[type='number']去掉箭头 */
.el-message {
  z-index: 999999999 !important;
  padding: 15px 20px;
}
// 单选点击有一层蓝色边框bug
.el-radio-button {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  outline: none !important;
  // border: none !important;
}
.zw {
  width: 218px;
  height: 175px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
  img {
    width: 218px;
    height: 175px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
  }
  p {
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #b5b5b5;

    position: absolute;
    bottom: -10px;
  }
}
// 分页前往器
.el-pagination__editor.el-input .el-input__inner {
  line-height: 31px;
}
/* 搜索框的修改 */
#BrandRanking {
  // .el-input__inner {
  //   // border-right: 0;
  // }
  .bor_left {
    input {
      border-left: none !important;
    }
  }
}
#liveDetails {
  .searchBox {
    .el-input__inner {
      border-right: 0;
      border-radius: 4px 0 0 4px;
    }
  }
}
.el-input__inner:hover {
  border-color: #e5e5e5;
}
// 直播详情添加商品
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #fd7f2c;
  border-color: #fd7f2c;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #fd7f2c;
}
.el-checkbox__inner:hover {
  border-color: #fd7f2c;
}
/* 直播监控中的时间选择表 */
.el-button--text {
  color: #fd7f2c;
}
.el-button.is-plain:focus,
.el-button.is-plain:hover {
  border-color: #fd7f2c;
  color: #fd7f2c;
}
.el-button--text:focus,
.el-button--text:hover {
  color: #ff924b;
}
// 收藏取消收藏
.el-button:focus,
.el-button:hover {
  background-color: transparent;
}
//
.el-checkbox__input {
  .is_focus {
    .el-checkbox__inner {
      border-color: #fd7f2c !important;
    }
  }
}
// 三级菜单高度
.el-cascader-menu__wrap {
  height: 224px;
}
// 下拉框层级避免盖住表头吸顶
.el-select-dropdown {
  z-index: 98 !important;
}
//  三级菜单高度层级避免盖住表头吸顶
.el-cascader__dropdown {
  z-index: 100 !important;
}
// 三级菜单鼠标划过颜色
.el-cascader-node:not(.is-disabled):focus,
.el-cascader-node:not(.is-disabled):hover {
  background: #ffffff;
}
.el-cascader-node:not(.is-disabled):hover {
  background: #f5f7fa !important;
  color: #fd7f2c;
  // font-weight: 600;
}
// 三级菜单鼠选中颜色
.el-cascader-node.in-active-path,
.el-cascader-node.is-active,
.el-cascader-node.is-selectable.in-checked-path {
  color: #fd7f2c;
}
// 三级菜单取消选中显示蓝色边框
.is-focus .el-checkbox__inner {
  border: 1px solid #dcdfe6 !important;
}
.svip_popup {
  width: 500px;
  // height: 500px;
  position: relative;
  padding: 40px;
  background-color: #fff;
  border-radius: 4px;
  box-sizing: border-box;
  .close_img_box {
    width: 16px;
    height: 16px;
    position: absolute;
    right: 12px;
    top: 12px;
    background: url('~@/assets/wang/video/close.png') no-repeat;
    background-size: cover;
    cursor: pointer;
    // img{
    //   height: 100%;
    //   width: 100%;
    // }
  }
  .sp_title {
    display: flex;
    justify-content: center;
    align-items: center;
    .sp_text {
      font-size: 20px;
      color: #222222;
      font-weight: 600;
    }
    .sp_xsimg_box {
      position: relative;
      width: 42px;
      height: 24px;
      margin-left: 8px;
      img {
        width: 100%;
        height: 100%;
      }
      .sp_xs {
        position: absolute;
        top: 1px;
        left: 9px;
        font-size: 14px;
        color: #ffffff;
        font-weight: 600;
      }
    }
  }
  .sp_line {
    width: 100%;
    text-align: center;
    margin-top: 29px;
  }
  .sp_code {
    width: 100%;
    text-align: center;
    margin-top: 28px;
    img {
      width: 179px;
      height: 179px;
    }
  }
  .sp_svip_box {
    display: flex;
    justify-content: center;
    align-items: center;
    // margin-top: 17px;
    .img_box {
      width: 30px;
      height: 30px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .svip_text {
      font-size: 18px;
      color: #fd7f2c;
      font-weight: 600;
      // margin-left: 10px;
      p{
        font-size: 14px;
        color: #222222;
        font-weight: normal;
        text-align: center;
        margin-bottom: 15px;
        margin-top: 4px;
      }
    }
  }
  .sp_dotted_line {
    width: 100%;
    // height: 1px;
    border-top: 1px dashed #e5e5e5;
    margin-top: 23px;
  }
  .sp_btm_box {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    .sp_btm_item {
      text-align: center;
      .btm_text {
        // margin-top: 6px;
        font-size: 14px;
        color: #888888;
      }
    }
    .btm_img_box{
      transform: scale(0.5);
    }
  }
}
.activity_popup {
  width: 935px;
  height: 608px;
  position: relative;
  border-radius: 4px;
  box-sizing: border-box;
  background: url('/static/banner_b.jpg');
  background-size: cover;
  overflow: hidden;
  .ap_clone {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .ap_look_details {
    position: absolute;
    left: 50%;
    bottom: 88px;
    transform: translateX(-50%);
    // line-height: 52px;
    // text-align: center;
    width: 192px;
    height: 86px;
    background: url('./assets/img/huodong_btn.png');
    background-position: center;
    // background-image: linear-gradient(3deg, #b9301b 17%, #cf3720 100%);
    // border: 3px solid #ffe7d5;
    // border-radius: 60px;
    // font-size: 20px;
    // color: #fff;
    cursor: pointer;
    box-sizing: border-box;
    animation: move 2.5s linear infinite;
  }
  @keyframes move {
    0% {
      transform: translateX(-50%) scale(1);
    }
    60% {
      transform: translateX(-50%) scale(1);
    }
    70% {
      transform: translateX(-50%) scale(1.1); //perspective(1px) 这个是解决按钮放大时文字模糊的问题
    }
    80% {
      transform: translateX(-50%) scale(1); //perspective(1px) 这个是解决按钮放大时文字模糊的问题
    }
    90% {
      transform: translateX(-50%) scale(1.1);
    }
    100% {
      transform: translateX(-50%) scale(1);
    }
  }
}
// .app_loading {
//   position: fixed;
//   width: 100%;
//   height: 100%;
//   left: 0;
//   top: 0;
//   background-color: #36383f;
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   z-index: 9;
//   & > div {
//     width: 150px;
//     height: 15px;
//     span {
//       display: inline-block;
//       width: 15px;
//       height: 100%;
//       margin-right: 5px;
//       background: #fd7f2c;
//       -webkit-transform-origin: right bottom;
//       -webkit-animation: load 1200ms ease infinite;
//     }
//     span:last-child {
//       margin-right: 0px;
//     }
//     @-webkit-keyframes load {
//       0% {
//         opacity: 1;
//       }
//       100% {
//         opacity: 0;
//         -webkit-transform: rotate(90deg);
//       }
//     }
//     span:nth-child(1) {
//       -webkit-animation-delay: 0.13s;
//     }
//     span:nth-child(2) {
//       -webkit-animation-delay: 0.26s;
//     }
//     span:nth-child(3) {
//       -webkit-animation-delay: 0.39s;
//     }
//     span:nth-child(4) {
//       -webkit-animation-delay: 0.52s;
//     }
//     span:nth-child(5) {
//       -webkit-animation-delay: 0.65s;
//     }
//   }
// }
// 首页智能分析弹框关闭按钮
.analysis_pop {
  .el-dialog__header {
    display: none;
  }
}
.el-popup-parent--hidden {
  // #my_header {
  //   & > div {
  //     // padding-right: 30px !important;
  //     left: initial !important;
  //     right: 10px !important;
  //     padding-left: 10px !important;
  //   }
  //   .activity_btn {
  //     right: 100px !important;
  //   }
  // }
  // .headerFixedBox{
  //   left: initial !important;
  //   right: 5px !important;
  // }
}
.music_searchBox {
  .el-input__inner {
    border: none;
  }
}
// 对公转账
.dialog01 {
  .content {
    .d5 {
      display: block;
      width: 150px;
      height: 48px;
      background-color: #fd7f2c;
      border-radius: 4px;
      text-align: center;
      font-size: 16px;
      line-height: 44px;
      color: #ffffff;
      margin: 0 auto;
      margin-top: 50px;
    }
    .d4 {
      margin-top: 14px;
      span {
        font-size: 14px;
        color: #555555;
      }
      color: #222;
    }
    .d3 {
      > div {
        text-align: center;
        img {
          width: 36px;
          height: 36px;
        }
        p {
          font-size: 14px;
          margin-top: 10px;
          color: #555555;
        }
      }
      > img {
        width: 13px;
        height: 12px;
        margin: 0 40px;
      }
      margin-top: 30px;
      margin-bottom: 50px;
      display: flex;
      align-items: center;
    }
    .d2 {
      font-weight: 600;
      font-size: 16px;
      color: #222222;
      text-align: left;
    }
    .d1 {
      font-weight: 600;
      font-size: 20px;
      color: #222222;
      text-align: center;
    }
    padding: 50px 30px;
    box-sizing: border-box;
  }
}
.fixedThead {
  white-space: nowrap;
}
.submenu_box {
  ul {
    padding: 0 20px;
    box-sizing: border-box;
    li {
      border-bottom: 1px solid #e5e5e5;
      a {
        &:hover {
          color: #fd7f2c;
          text-decoration: none;
        }
      }
    }
    .el-menu .el-menu-item {
      box-sizing: border-box;
      padding: 0 20px;
      border-bottom: 1px solid #e5e5e5;
    }
  }
}
// 大盘的loading
#trafficMarket {
  position: relative;
  // height: 96vh;
  .el-loading-mask {
    background-color: transparent !important;
  }
}
.notify_give{
  span{
    font-size: 14px;
    vertical-align: middle;
  }
  .notify_icon_smile{
    display: inline-block;
    width: 18px;
    height: 18px;
    background:url('./assets/img/smile.png') no-repeat center center;
    background-size: 100% 100%;
    vertical-align: middle;
  }
}

// 开通vip样式覆盖start
.up_dialog{
  border-radius: 4px; 
}
.up_dialog_content{
  position: relative;
  padding: 20px 20px 24px;
  h5{
    &::before{
      content: '';
      display: inline-block;
      width: 4px;
      height: 17px;
      border-radius: 2px;
      background-color: #fd7f2c;
      vertical-align: middle;
      margin-right: 8px;
    }
    span{
      display: inline-block;
      font-size: 16px;
      color: #222;
      vertical-align: middle;
    }
  }
  .up_dialog_msg{
    padding-left: 13px;
    font-size: 14px;
    color: #555;
    margin-top: 28px;
    p{
      line-height: 25px;
    }
    .up_annotation{
      color: #fd7f2c;
      margin-top: 18px;
    }
    span{
      color: #fd7f2c;
    }
  }
  .up_icon{
    position: absolute;
    right: 29px;
    top: 28px;
    width: 103px;
    height: 102px;
    background: url(./assets/img/up_icon.png) no-repeat;
    background-size: 100% 100%;
  }
}
.up_dialog_btns{
  display: flex;
  justify-content: space-between;
  padding: 0 14px;
  margin-top: 20px;
  button{
    width: 186px;
    height: 50px;
    border-radius: 4px;
    border: 1px solid #fd7f2c;
    font-size: 16px;
    color: #fd7f2c;
    &.active{
      color: #fff;
      background-color: #fd7f2c;
    }
  }
}
.time_activity_pop{
  .el-dialog{
    background-color: transparent !important;
    box-shadow: none;
  }
  .el-dialog__wrapper{
    overflow: hidden;
  }
}
.time_activity_wrap{
  position: relative;
  width: 100%;
  height: 564px;
  background: url("~@/assets/shi/home-banner.png") no-repeat;
  background-size: 100% 100%;
  .close_img{
    width: 32px;
	  height: 32px;
    position: absolute;
    top: -45px;
    right: 0;
    cursor: pointer;
  }
  .btn{
    width: 234px;
    height: 63px;
    text-align: center;
    position: absolute;
    left: 50%;
    bottom: 54px;
    transform: translate(-50%,50%);
    cursor: pointer;
    img{
      width: 100%;
      height: 100%;
    }
  }
}
.help_dialog{
  display: none;
  .el-dialog{
    background-color: transparent;
    box-shadow: none;
  }
  .el-dialog__body{
    background-color: transparent;
  }
}
.show_dialog{
  display: block;
}
.help_friend_pop{
  position: relative;
  width: 100%;
  height: 504px;
  background: url("~@/assets/shi/help_bg.png") no-repeat;
  background-size: 100% 100%;
  .help_btn{
    width: 175px;
    height: 48px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate( -50%, 50% );
    cursor: pointer;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .help_close_img{
    width: 30px;
    height: 30px;
    position: absolute;
    top: -30px;
    right: -30px;
  }
}
// vip开通样式覆盖end
</style>
